<template>
    <div id="register">   
        <div class="register_box" :style="{ backgroundImage: `url(${registerLoginbc})` }">
            <div class="register_main">
                <div class="register_form">
                    <div class="register_introduce">
                        <p class="register_title">注册账号</p>
                    </div>
                    <el-form :model="userForm" status-icon :rules="rules" ref="userForm" label-width="115px" class="register_content" >
                        <!-- 用户名称 -->
                        <el-form-item label="用户昵称：" prop="nickName">
                            <el-input placeholder="输入您的用户名称" prefix-icon="el-icon-user" v-model="userForm.nickName" clearable style="width:90%"></el-input>
                        </el-form-item>
                        <!-- 用户名称 -->
                        <el-form-item label="用户账号：" prop="userName">
                            <el-input placeholder="输入您的用户账号" prefix-icon="el-icon-user" v-model="userForm.userName" clearable style="width:90%"></el-input>
                        </el-form-item>
                        <!-- 用户手机号 -->
                        <el-form-item label="用户手机：" prop="phone">
                            <el-input placeholder="输入您的手机号" prefix-icon="el-icon-phone-outline" v-model="userForm.phone" clearable  style="width:90%"></el-input>
                        </el-form-item>
                        <!-- 用户邮箱 -->
                        <el-form-item prop="mail" label="用户邮箱：">
                            <el-input placeholder="输入您的邮箱" prefix-icon="el-icon-message" v-model="userForm.mail" style="width:90%" clearable></el-input>
                        </el-form-item>
                        <!-- 用户邮箱验证 -->
                        <el-form-item prop="mailCode" label="邮箱验证：">
                            <el-input placeholder="输入邮箱验证码"  prefix-icon="el-icon-message" v-model="userForm.mailCode" style="width:44%;float:left;" clearable></el-input>
                            <el-button  class="login_mailCode" @click="getCountdown('userForm')" :disabled="totalTime <60">{{content}}</el-button>
                        </el-form-item>
                        <!-- 用户密码 -->
                        <el-form-item label="用户密码：" prop="password">
                            <el-input placeholder="输入您的密码" prefix-icon="el-icon-lock" v-model="userForm.password" show-password  clearable style="width:90%"></el-input>
                        </el-form-item>
                        <!-- 用户确认密码 -->
                        <el-form-item label="确认密码：" prop="checkPassWord">
                            <el-input placeholder="确认您的密码" prefix-icon="el-icon-lock" v-model="userForm.checkPassWord" show-password  clearable style="width:90%"></el-input>
                        </el-form-item>
                        <!-- 操作 -->
                        <el-form-item>
                            <el-button type="primary" class="register_button" plain  @click="determineRegister('userForm')">确认注册</el-button>
                            <el-link :underline="false" class="go_login" @click="skipLogin()">已有账户？去登陆</el-link>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
        </div>
    </div>
	
</template>

<script>
import registerLoginbc from '@/assets/image/pcRegister.png'
export default {
	name: 'register',
		data () {
            // 校验手机号查重
			const checkPhone = (rule, value, callback) => {
                const mobile = /^(1[3456789]\d{9})$/;
                if (value == '') {
                    callback(new Error('手机号不能为空'))
                } else {
                    if(mobile.test(value)){
                        this.$axios.get('/userLogin/checkPhone?phone=' + value).then(res => {
                            if(res.data.data != null){
                                callback(new Error('当前手机号已存在'))
                            } else {
                                callback();
                            }
                        })
                    } else {
                        callback(new Error('输入正确的手机号格式'))
                    }
                }
                
			}
            // 校验邮箱号查重
			const checkmail = (rule, value, callback) => {
                const regMobile =  /^([a-zA-Z0-9]+[-_\.]?)+@[a-zA-Z0-9]+\.[a-z]+$/;
                if(value == ''){
                    callback(new Error('邮箱不能为空'))
                } else {
                    if(regMobile.test(value)){
                        this.$axios.get('/userLogin/checkMail?mail=' + value).then(res => {
                            if(res.data.data != null){
                                callback(new Error('当前邮箱号已存在'))
                            } else {
                                callback();
                            }
                        })
                    } else{
                        callback(new Error('请输入合法的邮箱'))
                    }
                }
                
			}
            // 校验登录名查重
			const checkLoginName = (rule, value, callback) => {
				if (value == '') {
					callback(new Error('用户名不能为空'))
				} else {
                    this.userForm.userName = value.replace(/[\u4E00-\u9FA5]/g, "");
                    if(this.userForm.userName == ''){
                        callback(new Error('账号名不允许有中文的出现'))
                    } else {
                        if( value.length > 5){
                            this.$axios.get('/userLogin/checkLoginName?userName=' + value).then(res => {
                                if(res.data.data != null){
                                    callback(new Error('当前名字已存在'))
                                } else {
                                    callback();
                                }
                            })
                        } else{
                            callback(new Error('账号最少输入六位'))
                        }
                        
                    }
				}
			}
            // 校验二次密码是发正确
			var validatePass = (rule, value, callback) => {
				if (value === '') {
					callback(new Error('请再次输入密码'))
				} else if (value !== this.userForm.password) {
					callback(new Error('两次输入密码不一致!'))
				} else {
					callback()
				}
			}
			return {
                // 倒计时默认60秒
                totalTime: 60,
                // 按钮文字
                content: "发送验证码",
                // 注册页面背景图片
                registerLoginbc:registerLoginbc,
                // 用户对象
                userForm:{
                    // 账号名称
                    userName: '',
                    // 用户名称
                    nickName: '',   
                    // 用户邮箱
                    mail: '',
                    // 用户手机号
                    phone: '',
                    // 用户邮箱验证码
                    mailCode: '',
                    // 用户密码
                    password: '',
                    // 二次输入用户密码
                    checkPassWord: ''
                },
                // 校验规则
				rules: {
                    // 校验手机号是否已经存在
                    phone: [
						{validator: checkPhone, trigger: 'blur'}
					],
                    // 校验用户名称
                    nickName: [
						{ required: true, message: '用户名称不能为空', trigger: 'blur' },
					],
                    // 校验账号是否已经存在
                    userName: [
						{validator: checkLoginName, trigger: 'blur'}
					],
                    // 校验用户邮箱验证码
                    mailCode: [
						{ required: true, message: '邮箱验证码不能为空', trigger: 'blur' },
					],
                    // 校验用户邮箱
                    mail: [
                        { required: true, validator: checkmail, trigger: 'blur' },
                    ],
                    // 校验用户首次密码
                    password: [
                        { required: true, message: '密码不能为空', trigger: 'blur' },
                    ],
                    // 校验二次密码是否正确
                    checkPassWord: [
						{ validator: validatePass, trigger: 'blur' }
					],
				}
			}
		},
		mounted () {
		},
		methods: {
            // pc端注册用户
            registerUsers(){
                var formdata = new FormData()
                formdata.set('mail', this.userForm.mail)
                formdata.set('phone', this.userForm.phone)
                formdata.set('password', this.userForm.password)
                formdata.set('nickName', this.userForm.nickName)
                formdata.set('userName', this.userForm.userName)
                this.$axios.post('/userLogin/registerUsers', formdata).then(res =>{
                    if (res.data.data > 0) {
                        this.message('恭喜您，注册成功', 'success')
                        this.$router.push({path: '/Login'})
                    }  else {
                        this.message('注册失败', 'warning')
                    }
                })
            },
            // 确认验证码是否正确
            determineMailCode(){
                this.$axios.get('/userLogin/determineMailCode', {
                    params:{
                        mail: this.userForm.mail,
                        code: this.userForm.mailCode
                    }
                }).then(res => {
                    if(res.data.data.data == 200){
                        this.registerUsers()
                    } else{
                        alert("邮箱验证码不正确")
                    }
                })
            },
            // 注册时校验注册表单
            determineRegister(userForm){
                this.$refs[userForm].validate((valid) => {
                    if (valid) {
                        this.determineMailCode()
                    } else {
                        alert("完善注册信息")
                    }
                });
            },
            // 向我们的邮箱发送验证码
            registerByMailCode(){
                this.$axios.get('/userLogin/registerByMailCode?mail=' + this.userForm.mail).then(res => {
                })
            },
            // 邮箱验证发送倒计时   
            getCountdown(userForm) {
                // 校验是否输入邮箱
                this.$refs[userForm].validateField('mail', (valid) => {
                    if (valid === '') {
                        // 发送验证码
                        this.registerByMailCode()
                        // 60秒倒计时
                        let clock =  window.setInterval(() => {
                            this.content = this. totalTime + 's后重新发送';
                            this.totalTime --;
                            if(this. totalTime < 0){
                                this. totalTime = 60;
                                this.content = "重新发送验证码";
                                window.clearInterval(clock);
                            }
                        }, 1000);
                    }
                })
            },
            // 跳转登录页面
            skipLogin(){
                this.$router.push({path: '/Login'})
            },
			//消息提示框
			message(message,type){
				this.$message({
					message:message,
					type: type
				});
			},
            resetForm(formName) {
                this.$refs[formName].resetFields();
            }
		}
}
</script>


<style scoped>
.register_box {
	width: 100%;
	height: 974px;
    background-color: #FFF8F0;
	margin: 0 auto;
	overflow: hidden;
	position: relative;
}
.register_main{
    width: 80%;
	height: 100%;
	margin: 0 auto;
	position: relative;
}
.register_form{
    width: 30%;
    height: 70%;
    margin: 0 auto;
    margin-top: 147px;
    background-color: white;
}
.register_introduce{
    width: 100%;
    height: 50px;
    background-color: white;
}
.register_title{
    text-align: center;
    font-size: 18px;
    line-height: 2.5;
}
.login_mailCode{
    margin-left: 26px;
}
.register_content{
    margin-top: 40px;
}
.register_button{
    margin-top:20px;
    width:80%
}
.go_login{
    margin-left: 164px;
    margin-top: 20px;
}
</style>